<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>我的商场 | 用户列表</title>
    <jsp:include page="/includes/header.jsp"/>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <jsp:include page="/includes/nav.jsp"/>
    <jsp:include page="/includes/menu.jsp"/>

    <div class="content-wrapper">

        <section class="content">
            <div class="row">
                <div class="col-xs-12">

                    <c:if test="${message != null}">
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <h4><i class="icon fa fa-check"></i> 提示!</h4>
                                ${message}
                        </div>
                    </c:if>
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">用户列表</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">

                                <div class="row">
                                    <div class="col-sm-offset-2 col-sm-2">
                                        <a type="button" href="/user_form.jsp" class="btn btn-block btn-success btn-sm" style="width: 120px;"><i class="fa fa-thumbs-up"></i> &nbsp;&nbsp;&nbsp;&nbsp;添加</a>
                                    </div>
                                    <div class="col-sm-offset-2 col-sm-2">
                                        <button type="button" class="btn btn-block btn-danger btn-sm" id="batchDelete" style="width: 120px;"><i class="fa fa-thumbs-up"></i> &nbsp;&nbsp;&nbsp;&nbsp;批量删除</button>
                                    </div>

                                    <%--<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-info">
                                        Launch Info Modal
                                    </button>--%>

                                    <div class="col-xs-4">
                                        <form action="/userSearch" method="post">
                                        <div class="input-group input-group-sm pull-right" style="width: 200px;">
                                            <input type="text" name="search" class="form-control " placeholder="搜索" id="likeSearch">
                                            <div class="input-group-btn">
                                                <button type="submit" class="btn btn-default btn-sm" id="simple-search" ><i class="fa fa-search"></i></button>
                                                <button type="button" class="btn btn-default btn-sm" title="Advanced-Search" id="toggle-advanced-search">
                                                    <i class="fa fa-angle-double-down"></i>
                                                </button>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="row" style="display:none;margin: 10px" id="div-advanced-search">
                                    <div class="form-inline well no-margin">
                                        <form class="form-inline well no-margin" action="/userSearch" method="post" >
                                        <div class="box-body">
                                            <div class="form-group">
                                                <label for="userName" class="col-xs-3 control-label">用户名</label>

                                                <div class="col-xs-8">
                                                    <%--<form:input path="username" cssClass="form-control" placeholder="Enter username" />--%>
                                                    <input id="userName" name="userName" class="form-control" placeholder=" 用户名" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="phone" class="col-xs-3 control-label">手机号</label>

                                                <div class="col-xs-8">
                                                    <%--<form:input path="phone" cssClass="form-control" placeholder="Enter phone" />--%>
                                                    <input id="phone" name="phone" class="form-control" placeholder=" 手机号" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="email" class="col-xs-3 control-label">邮箱</label>

                                                <div class="col-xs-8">
                                                    <%--<form:input path="email" cssClass="form-control" placeholder="Enter email" />--%>
                                                    <input id="email" name="email" class="form-control" placeholder=" 邮箱" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-6 col-sm-offset-6">
                                                    <button type="submit" class="btn btn-default btn-sm" id="advanced-search" ><i class="fa fa-search"></i> 高级搜索</button>
                                                </div>
                                            </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="example2" class="table table-bordered table-hover dataTable"
                                               role="grid" aria-describedby="example2_info">
                                            <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending">
                                                    <input type="checkbox" class="minimal iCheckMaster" />
                                                </th>
                                                <th class="sorting_asc" tabindex="0" aria-controls="example2"
                                                    rowspan="1" colspan="1" aria-sort="ascending"
                                                    aria-label="Rendering engine: activate to sort column descending">
                                                    标号
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1" aria-label="Browser: activate to sort column ascending">
                                                    用户名
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Platform(s): activate to sort column ascending">
                                                    手机号
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="Engine version: activate to sort column ascending">
                                                    邮箱
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="CSS grade: activate to sort column ascending">
                                                    创建时间
                                                </th>
                                                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                                    colspan="1"
                                                    aria-label="CSS grade: activate to sort column ascending">
                                                    操作
                                                </th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${tbUsers}" var="tbU">
                                                <tr role="row" class="odd">
                                                    <td><input type="checkbox" class="minimal" id="${tbU.id}" /></td>
                                                    <td>${tbU.id}</td>
                                                    <td>${tbU.userName}</td>
                                                    <td>${tbU.phone}</td>
                                                    <td>${tbU.email}</td>
                                                    <td><fmt:formatDate value="${tbU.created}"
                                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                    <td style="width: 30%;">
                                                        <div class="row">
                                                            <div class="col-xs-4">
                                                                <button type="button" class="btn btn-info btn-sm" onclick="infoById(${tbU.id})"  style="width: 100px;"><i class="fa fa-search"></i>&nbsp;详情</button>
                                                            </div>
                                                            <div class="col-xs-4">
                                                                <a type="button" href="/editByEmail?email=${tbU.email}" class="btn btn-primary btn-sm" style="width: 100px;"><i class="fa fa-edit"></i>&nbsp; 修改</a>
                                                            </div>
                                                            <div class="col-xs-4">
                                                                <a type="button" href="/deleteById?id=${tbU.id}" class="btn btn-danger btn-sm" style="width: 100px;"><i class="fa fa-trash-o"></i>&nbsp; 删除</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="dataTables_info" id="example2_info" role="status"
                                             aria-live="polite">Showing 1 to 10 of 57 entries
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
                                            <ul class="pagination">
                                                <li class="paginate_button previous disabled" id="example2_previous"><a
                                                        href="#" aria-controls="example2" data-dt-idx="0" tabindex="0">Previous</a>
                                                </li>
                                                <li class="paginate_button active"><a href="#" aria-controls="example2"
                                                                                      data-dt-idx="1" tabindex="0">1</a>
                                                </li>
                                                <li class="paginate_button "><a href="#" aria-controls="example2"
                                                                                data-dt-idx="2" tabindex="0">2</a></li>
                                                <li class="paginate_button "><a href="#" aria-controls="example2"
                                                                                data-dt-idx="3" tabindex="0">3</a></li>
                                                <li class="paginate_button "><a href="#" aria-controls="example2"
                                                                                data-dt-idx="4" tabindex="0">4</a></li>
                                                <li class="paginate_button "><a href="#" aria-controls="example2"
                                                                                data-dt-idx="5" tabindex="0">5</a></li>
                                                <li class="paginate_button "><a href="#" aria-controls="example2"
                                                                                data-dt-idx="6" tabindex="0">6</a></li>
                                                <li class="paginate_button next" id="example2_next"><a href="#"
                                                                                                       aria-controls="example2"
                                                                                                       data-dt-idx="7"
                                                                                                       tabindex="0">Next</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>

                </div>
            </div>
        </section>
    </div>

    <jsp:include page="/includes/copyright.jsp"/>

    <div class="modal modal-info fade" id="modal-info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Info Modal</h4>
                </div>
                <div class="modal-body">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="infoName" class="col-sm-2 control-label">用户名</label>

                                <div class="col-sm-10">
                                    <input type="text" name="infoName" class="form-control" id="infoName" placeholder="用户名" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="infoPwd" class="col-sm-2 control-label">密码</label>

                                <div class="col-sm-10">
                                    <input type="password" name="passWord" class="form-control" id="infoPwd" placeholder="密码" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="infoEmail" class="col-sm-2 control-label">邮箱</label>

                                <div class="col-sm-10">
                                    <input type="email" name="email" class="form-control" id="infoEmail" placeholder="邮箱" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="infoPhone" class="col-sm-2 control-label">电话号码</label>

                                <div class="col-sm-10">
                                    <input type="text" name="phone" class="form-control" id="infoPhone" placeholder="电话号码" readonly>
                                </div>
                            </div>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-right" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


</div>
<jsp:include page="/includes/footer.jsp"/>

<script type="text/javascript">
    /**
     * @Method:
     * @Description:    显示和隐藏高级查询的div
     * @Param:
     * @return:
     * @Author:        Mr.Vincent
     * @Date:          2019/6/1
     */
    $("#toggle-advanced-search").click(function () {
        $("i",this).toggleClass("fa-angle-double-down fa-angle-double-up");
        $("#div-advanced-search").slideToggle("fast");
    })

    /**
     * @Method:
     * @Description:    根据id查询详情功能
     * @Param:
     * @return:
     * @Author:        Mr.Vincent
     * @Date:          2019/6/1
     */
    function infoById(parm) {
        $("#modal-info").modal("show");
        $.ajax({
            type: "POST",
            url: "/infoById",
            data: {id: parm},
            dataType: "json",
            success: function (data) {
                $("#infoName").val(data.userName);
                $("#infoPwd").val(data.passWord);
                $("#infoEmail").val(data.email);
                $("#infoPhone").val(data.phone);
            }
        })
    }

    /**
     * @Method:
     * @Description:    复选框用的是iCheck的插件，这是iCheck的初始化
     * @Param:
     * @return:
     * @Author:        Mr.Vincent
     * @Date:          2019/6/1
     */
    $(function () {
        $('input[type="checkbox"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass   : 'iradio_minimal-blue'
        });

        //获取主控件checkbox
        var _masterCheckbox = $('input[type="checkbox"].minimal.iCheckMaster');

        //获取全部控件checkbox
        var _checkbox = $('input[type="checkbox"].minimal');

        // Checkbox的全选功能
        _masterCheckbox.on("ifClicked", function (e) {
            // 当前状态已选中，点击后应取消选择
            if (e.target.checked) {
                _checkbox.iCheck("uncheck");
            }
            // 当前状态未选中，点击后应全选
            else {
                _checkbox.iCheck("check");
            }
        });

        /**
         * @Method:        批量删除
         * @Description:
         * @Param:
         * @return:
         * @Author:        Mr.Vincent
         * @Date:          2019/6/1
         */
        $("#batchDelete").click(function () {
            //定义一个数组
            var _idArray = new Array();

            //将选中的元素 id 放入数组中
            _checkbox.each(function () {
                var _id = $(this).attr("id");
                if (_id != null && _id != "undefine" && $(this).is(":checked")) {
                    _idArray.push(_id);
                }
            });

            if (_idArray.length === 0) {
                swal("请先选择复选框！！！")
            } else {
                swal({
                    title: "你确定要删除吗？",
                    text: "一旦删除，将无法恢复！！！",
                    icon: "warning",
                    buttons: ["取消", "确定删除！"],
                    dangerMode: true,
                })
                    .then((willDelete) => {
                        if (willDelete) {

                            //ajax请求
                            $.post("/batchDelete", {ids: _idArray.toString()}, function (data) {
                                debugger
                                if (data.message != '数据删除失败！！！') {
                                    swal(
                                        "删除成功!!!",
                                        data.message, {
                                            icon: "success",
                                        })
                                } else {
                                    swal(
                                        "删除失败!!",
                                        data.message, {
                                            buttons: false,
                                            timer: 2000,
                                        })
                                }
                            })
                        }
                    })
            }
        })
    })



</script>
</body>
</html>
